<template>
  <div>
    <van-row class="side">
      <van-col span="2"><van-icon name="location-o" /></van-col>
      <van-col span="7">
        <h1 class="header-logo"><img :src="logo" alt="" />小u商城</h1>
      </van-col>
      <van-col span="10" offset="1" class="header-search">
        <input type="text" placeholder="按内容搜索" @click="$router.push('/search')" />
      </van-col>
      <van-col span="2" offset="2">
        <van-icon name="shop-o" />
      </van-col>
    </van-row>
    <van-row class="nav-box">
      <ul class="header-nav">
        <li>
          <router-link
            :to="'/list?id=' + item.id+'&type=1'"
            v-for="item in goodsname"
            :key="item.id"
            >{{ item.catename }}</router-link
          >
        </li>
      </ul>
    </van-row>
    <div class="seck">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in Banner" :key="item.id"
          ><img :src="$pre + item.img" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <ul class="nav-chart">
      <li>
        <router-link to="">
          <img :src="time" />
          <p>限时秒杀</p>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="hot" />
          <p>畅销产品</p>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="king" />
          <p>品质大牌</p>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="shopping" />
          <p>小U自营</p>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <img :src="pig" />
          <p>积分商城</p>
        </router-link>
      </li>
    </ul>
    <div class="certre clearfix">
      <div class="item1-box clearfix">
        <div class="list-item1 clearfix">
          <img :src="item1" alt="" />
          <h3>限时秒杀</h3>
          <a href="#">查看更多 &gt;</a>
          <p>每天0点场 好货秒不停</p>
          <p><span>05</span>: <span>20</span>:<span>48</span></p>
        </div>
        <div class="list-item2">
          <img :src="item2" alt="" />
          <h3>品牌上新</h3>
          <p>9点整,抢大牌</p>
          <a href="#">疯抢红包 &gt;</a>
        </div>
        <div class="list-item3">
          <img :src="item3" alt="" />
          <h3>日用好物</h3>
          <p>愿君多采撷</p>
          <a href="#">塞满奖券 &gt;</a>
        </div>
      </div>
      <div class="item2-box">
        <div class="item2-tit">
          <a href="#" class="item2-cur">双11尖货预购</a>
          <a href="#">畅购全球</a>
        </div>
        <ul class="item2-list">
          <li>
            <img :src="list1" alt="" />
            <p>套装/礼盒</p>
          </li>
          <li>
            <img :src="list2" alt="" />
            <p>彩妆套装</p>
          </li>
          <li>
            <img :src="list3" alt="" />
            <p>身体乳液/霜</p>
          </li>
          <li>
            <img :src="list4" alt="" />
            <p>爽肤水/化妆水</p>
          </li>
        </ul>
      </div>
      <div class="tab">
        <ul class="clearfix">
          <li :class="[n == 0 ? 'ace' : '']" @click="n = 0">热门推荐</li>
          <li :class="[n == 1 ? 'ace' : '']" @click="n = 1">上新推荐</li>
          <li :class="[n == 2 ? 'ace' : '']" @click="n = 2">所有商品</li>
        </ul>
        <div v-if="goods[n]">
          <div class="shopp" v-for="item in goods[n].content" :key="item.id">
            <div>
              <img :src="$pre + item.img" alt="" />
            </div>
            <div>
              <p>{{ item.goodsname }}</p>
              <p class="price">
                现价格: <span>{{ item.price }}</span>
              </p>
              <p>
                <del
                  >原价格: <span>{{ item.market_price }}</span></del
                >
              </p>
              <button @click="$router.push('/detail?id='+item.id)">立即抢购</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { reqSide, reqSeck, reqGood, reqCates } from "../../http/http";
import logo from "../../assets/img/icon-logo.png";
import hot from "../../assets/img/icon-hot.png";
import king from "../../assets/img/icon-king.png";
import pig from "../../assets/img/icon-pig.png";
import time from "../../assets/img/icon-time.png";
import shopping from "../../assets/img/icon-shopping.png";
import item1 from "../../assets/img/list-item1.png";
import item2 from "../../assets/img/list-item2.png";
import item3 from "../../assets/img/list-Item3.png";
import list1 from "../../assets/img/item2-list1.png";
import list2 from "../../assets/img/item2-list2.png";
import list3 from "../../assets/img/item2-list3.png";
import list4 from "../../assets/img/item2-list4.png";

export default {
  data() {
    return {
      logo,
      hot,
      king,
      pig,
      shopping,
      time,
      item1,
      item2,
      item3,
      list1,
      list2,
      list3,
      list4,
      active: 1,
      //选项卡
      n: 0,
      // banner图
      Banner: [],

      Secks: [],
      goods: [],
      goodsname: [],
    };
  },

  mounted() {
    // //发请求  轮播图
    reqSide().then((res) => {
      this.Banner = res.data.list;
    });
    //请求 限时秒杀
    reqSeck().then((res) => {
      this.Secks = res.data.list ? res.data.list : [];
    });
    //获去一级分类
    reqCates().then((res) => {
      this.goodsname = res.data.list;
      console.log(this.goodsname);
    });
    //请求 商品信息
    reqGood().then((res) => {
      this.goods = res.data.list ? res.data.list : [];
      console.log(this.goods);
    });
  },
};
</script>

<style scoped lang="less">
@import "../../less/index.less";
// 头部
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
.title {
  font-size: 0.4rem;
  margin-left: 0.2rem;
  color: #ff4400;
}
.item {
  padding: 0.2rem;
  margin: 0.2rem;
  border: 0.01rem solid #ccc;
}
.item a {
  margin: 0.2rem;
  display: inline-block;
}
.header-logo {
  font-size: 0in;
}
.side {
  background: @primary;
  height: @header-hei;
}
.side img {
  width: 100%;
  height: @header-img;
}
.van-icon {
  font-size: @header-img;
  color: @while;
}
.header-search input {
  line-height: @header-hei;
  font-size: 0.28rem;
  color: #999;
  width: 100%;
  background: @while;
  height: @header-hei;
  border-radius: 0.06rem;
  border: solid 0.02rem #e6e6e6;
  padding-left: 0.42rem;
  box-sizing: border-box;
}
.van-field__control {
  height: 100%;
}
.seck {
  min-height: 15vh;
}
.list {
  margin: 0.2rem;
  font-size: 0.4rem;
}
.list a {
  color: @primary;
}

// 导航栏

.nav-box {
  display: flex;
  /* 侧轴对齐 居中 */
  align-items: center;
  height: @header-nav;
  background: @primary;
}

.header-nav {
  width: 100%;
  height: @header-nav;
}
.header-nav li {
  display: flex;
  justify-content: space-around;
  align-self: center;
}
.header-nav li a {
  font-size: 0.23rem;
  margin: 0.05rem;
}

.nav-box a {
  font-size: 0.26rem;
  color: #fff;
  height: @header-nav;
  line-height: @header-nav;
}

//轮播图.
.van-swipe-item {
  height: 3.5rem;
}
.seck img {
  width: 100%;
  height: 100%;
}
//导航图
.nav-chart {
  width: 100%;
  height: 1.87rem;
  display: flex;
  justify-content: space-around;
  align-self: center;
}

.nav-chart img {
  width: 0.53rem;
  height: 0.6rem;
}

.nav-chart li {
  align-self: center;
  text-align: center;
  font-size: 0.2rem;
  line-height: 0.46rem;
}

//限时秒杀
.centre {
  background-color: #f2f2f2;
  overflow: hidden;
}

.item1-box {
  margin-top: 0.2rem;
  padding: 0 0.2rem 0.2rem 0.2rem;
}

.list-item1 {
  float: left;
  position: relative;
  padding-left: 0.2rem;
  padding-right: 0.3rem;
  /* 怪异盒子 */
  box-sizing: border-box;
  width: 50%;
  height: 3.5rem;
}
.list-item1 img,
.list-item2 img,
.list-item3 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 97%;
  height: 100%;
  z-index: -1;
}

.list-item1 h3 {
  float: left;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: #85a642;
}

.list-item1 a {
  float: right;
  font-size: 0.19rem;
  line-height: 0.6rem;
  color: #40403f;
}

.list-item1 p:nth-of-type(1) {
  float: left;
  font-size: 0.19rem;
  line-height: 0.38rem;
  color: #b6ce82;
}

.list-item1 p:nth-of-type(2) {
  position: absolute;
  left: 0.2rem;
  top: 0.95rem;
  font-size: 0.24rem;
  line-height: 0.38rem;
  color: #b6ce82;
}

.list-item1 p:nth-of-type(2) span {
  width: 0.32rem;
  height: 0.36rem;
  font-size: 0.18rem;
  color: #fff;
  background-image: linear-gradient(180deg, #87a845 1%, #b0cb79 100%);
  border-radius: 2px;
}

.list-item2 {
  float: left;
  position: relative;
  padding-left: 0.2rem;
  /* 怪异盒子 */
  box-sizing: border-box;
  width: 50%;
  height: 1.7rem;
}

.list-item2 h3 {
  float: left;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: #ff6040;
}

.list-item2 p {
  position: absolute;
  left: 0.2rem;
  top: 0.67rem;
  font-size: 0.19rem;
  color: #ff9586;
}

.list-item2 a {
  position: absolute;
  left: 0.2rem;
  top: 0.93rem;
  width: 1.2rem;
  height: 0.4rem;
  font-size: 0.18rem;
  color: #fff;
  line-height: 0.4rem;
  background-image: linear-gradient(
    180deg,
    #ff6040 0%,
    #ff7560 58%,
    #ff897f 100%
  );
  border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -webkit-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -moz-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -ms-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -o-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
}

.list-item3 {
  float: left;
  position: relative;
  padding-left: 0.2rem;
  /* 怪异盒子 */
  box-sizing: border-box;
  width: 50%;
  height: 1.7rem;
  margin-top: 0.1rem;
}

.list-item3 h3 {
  float: left;
  font-size: 0.32rem;
  line-height: 0.6rem;
  color: #b042ff;
}

.list-item3 p {
  position: absolute;
  left: 0.2rem;
  top: 0.67rem;
  font-size: 0.19rem;
  color: #ca80ff;
}

.list-item3 a {
  position: absolute;
  left: 0.2rem;
  top: 0.93rem;
  width: 1.2rem;
  height: 0.4rem;
  font-size: 0.18rem;
  color: #fff;
  line-height: 0.4rem;
  background-image: linear-gradient(
    180deg,
    #b042ff 0%,
    #d367ff 58%,
    #f58bff 100%
  );
  border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -webkit-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -moz-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -ms-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
  -o-border-radius: 0.04rem 0.2rem 0.2rem 0.04rem;
}

.item2-box {
  // width: 7.1rem;
  height: 3.34rem;
  background-color: #fff;
  padding: 0 0.2rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.item2-tit {
  height: 0.8rem;
  display: flex;
  /* 侧轴对齐 居中 */
  align-items: center;
}

.item2-tit a {
  flex-grow: 1;
  font-size: 0.28rem;
  color: #999;
}

.item2-tit .item2-cur {
  font-size: 0.32rem;
  color: #ff6040;
}

.item2-list {
  display: flex;
  /* 侧轴对齐 居中 */
  align-items: center;
  justify-content: space-between;
}

.item2-list li {
  flex-grow: 1;
  text-align: center;
}

.item2-list li img {
  width: 1.6rem;
  height: 1.6rem;
}

.item2-list li p {
  line-height: 0.53rem;
  font-size: 0.18rem;
  color: #333333;
}
.tab ul {
  height: 0.5rem;
  margin: 0.1rem;
  display: flex;
  align-items: center;
  text-align: center;
}
.tab ul li {
  height: 0.5rem;
  line-height: 0.5rem;
  float: left;
  flex: 1;
}
.tab .ace {
  background: #ff6600;
  color: @while;
}
.shopp {
  padding: 0.35rem;
  box-sizing: border-box;
  box-shadow: #ccc 10px;
  height: 3rem;
  margin: 0.1rem;
  border: 1px solid #ccc;
}
.shopp img {
  height: 100%;
  width: 100%;
}
.shopp div:nth-child(1) {
  height: 100%;
  width: 28%;
}
.shopp div {
  float: left;
}
.shopp div p {
  margin: 0.1rem;
}
.shopp div .price {
  color: @primary;
}
.shopp div button {
  border: none;
  background: @primary;
  width: 2rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  color: @while;
  font-size: @font2;
}
</style>
